<template>
  <view class="refresher-container">
    <!-- 这里的图片请换成自己项目的图片 -->
    <div
      class="var-pull-refresh-control"
      style="transform: translate3d(0, 14px, 0) translate(-50%)"
    >
      <text v-if="status === 'default'" class="default" />
      <text
        v-if="status === 'release-to-refresh' || status === 'loading'"
        class="loading"
        :class="[{ 'var-icon-loading': status === 'loading' }]"
      />
      <text v-if="status === 'complete'" class="complete" />
    </div>
  </view>
</template>

<script setup lang="ts">
defineProps({
  status: {
    type: String,
    default() {
      return 'default';
    },
  },
});
</script>

<style scoped>
.refresher-container {
  /* #ifndef APP-NVUE */
  display: flex;
  justify-content: center;
  align-items: center;

  /* #endif */
  height: 150rpx;
  flex-direction: column;
}

.refresher-image {
  margin-top: 10rpx;
  width: 45px;
  height: 45px;
}

.refresher-text {
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #666;
}

.var-pull-refresh-control {
  position: absolute;
  left: 50%;
  z-index: 90;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80rpx;
  height: 80rpx;
  background-color: rgb(254 247 255);
  border-radius: 50%;
  box-shadow: rgb(0 0 0 / 20%) 0 3px 1px -2px, rgb(0 0 0 / 14%) 0 2px 2px 0,
    rgb(0 0 0 / 12%) 0 1px 5px 0;
}

.default {
  @apply text-primary i-ep:bottom text-4;

  animation: fade-inouts 1s ease-in-out; /* 持续3秒、缓动循环 */
}

.loading {
  @apply text-primary i-ep:refresh-right text-4;

  animation: fade-inouts 1s ease-in-out; /* 持续3秒、缓动循环 */
}

.complete {
  @apply i-ep:select text-4;

  color: #00c28e;
  animation: fade-inouts 1s ease-in-out; /* 持续3秒、缓动循环 */
}

@keyframes fade-inouts {
  0% {
    opacity: 0;
    transform: scale(0.8); /* 初始缩小并透明 */
  }

  100% {
    opacity: 1;
    transform: scale(1); /* 中间完全显示并恢复原始大小 */
  }
}

.var-icon-loading {
  transform-origin: center; /* 确保旋转中心为元素中心 */
  animation: infinite-rotate 1.5s cubic-bezier(0.3, 0.6, 0.2, 1.4) infinite;
}

/* 定义旋转动画 */
@keyframes infinite-rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>
